<template>
  <div class="flex items-center justify-between header_box">
    <div class="flex items-center gap-2 cursor-pointer">
      <img src="@/assets/logo.jpg" alt="logo" class="w-10 h-10" />
      <span>内蒙古千火信息科技有限公司</span>
    </div>
    <div class="flex items-center gap-6 pr-3">
      <!-- <div h="full" @click="toggleDark()"> -->
      <div class="h-full cursor-pointer">        
        <el-dropdown placement="bottom-start" trigger="click">
          <el-badge :value="12" class="item">
            消息
          </el-badge>
          <template #dropdown>
            <el-dropdown-menu>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="系统消息" name="first">系统消息</el-tab-pane>
                  <el-tab-pane label="通知" name="second">通知</el-tab-pane>
              </el-tabs>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <button
          class="w-full cursor-pointer border-none bg-transparent"
          style="height: var(--ep-menu-item-height)"
        >
          <i inline-flex i="dark:ep-moon ep-sunny" />
        </button> -->
      </div>
      <el-dropdown>
        <span class="el-dropdown-link cursor-pointer">
          {{ userInfo.name }}
          <el-icon>
            <ArrowDown/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="modifyPassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    
  </div>
</template>
<script lang="ts" setup>
  import { repository } from '~/../package.json'
  import { toggleDark } from '~/composables'
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ArrowDown } from '@element-plus/icons-vue';
  import { useTabStore } from '@/stores/tabStore'
  const activeName = ref('first');
  const router = useRouter();
  const userInfo = ref({
    name: '管理员',
    role: '管理员',
  });
  const tabStore = useTabStore()
  const logout = () => {
    router.push('/login');
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    tabStore.clearTab();
  }
  const modifyPassword = () => {
    router.push('/modifyPassword');
  }
</script>
<style lang="scss">
.el-menu-demo {
  &.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
    margin-right: auto;
  }
}
.header_box {
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
}
</style>
